/**
 * 市场痛点与机会组件
 * 展示传统简历解析的痛点和AI解析的市场机会
 */

import { motion } from "framer-motion";
import {
    BarChart,
    Bar,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    ResponsiveContainer,
    Cell,
} from "recharts";
import { marketData } from "../../data/homeData";

interface PainPointsSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function PainPointsSection({ sectionRef }: PainPointsSectionProps) {
    return (
        <section ref={sectionRef} className="py-20 bg-gray-50">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">市场痛点与机会</h2>
                </motion.div>
                
                <div className="grid md:grid-cols-2 gap-10">
                    {/* 传统简历解析的痛点 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: -30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white rounded-2xl shadow-xl p-8 transform transition-all duration-300 hover:shadow-2xl">
                        <h3 className="text-2xl font-bold text-red-600 mb-6 flex items-center">
                            <i className="fa-solid fa-exclamation-circle mr-3"></i>传统简历解析的痛点
                        </h3>
                        <ul className="space-y-6">
                            <li className="flex items-start">
                                <div className="bg-red-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                    <i className="fas fa-hourglass-half text-red-600"></i>
                                </div>
                                <div>
                                    <h4 className="font-semibold text-xl text-gray-800">效率低下</h4>
                                    <p className="text-gray-600 mt-1">人工筛选1000份简历需耗时8小时，平均每份简历仅用7秒判断</p>
                                </div>
                            </li>
                            <li className="flex items-start">
                                <div className="bg-red-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                    <i className="fas fa-exclamation-triangle text-red-600"></i>
                                </div>
                                <div>
                                    <h4 className="font-semibold text-xl text-gray-800">准确率不足</h4>
                                    <p className="text-gray-600 mt-1">传统系统在专业术语解析中错误率高达40%，导致人才筛选偏差</p>
                                </div>
                            </li>
                            <li className="flex items-start">
                                <div className="bg-red-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                    <i className="fas fa-language text-red-600"></i>
                                </div>
                                <div>
                                    <h4 className="font-semibold text-xl text-gray-800">多语言支持不足</h4>
                                    <p className="text-gray-600 mt-1">非中文简历占比增加，传统解析工具难以应对多语种简历</p>
                                </div>
                            </li>
                            <li className="flex items-start">
                                <div className="bg-red-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                    <i className="fas fa-file-alt text-red-600"></i>
                                </div>
                                <div>
                                    <h4 className="font-semibold text-xl text-gray-800">格式兼容性差</h4>
                                    <p className="text-gray-600 mt-1">复杂排版和扫描件解析困难，结构化数据提取不完整</p>
                                </div>
                            </li>
                        </ul>
                    </motion.div>
                    
                    {/* AI简历解析的市场机会 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6,
                            delay: 0.2
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white rounded-2xl shadow-xl p-8 transform transition-all duration-300 hover:shadow-2xl">
                        <h3 className="text-2xl font-bold text-green-600 mb-6 flex items-center">
                            <i className="fa-solid fa-lightbulb mr-3"></i>AI简历解析的市场机会
                        </h3>
                        
                        {/* 市场规模图表 */}
                        <div className="mb-8">
                            <h4 className="font-semibold text-xl text-gray-800 mb-4">全球AI招聘市场规模</h4>
                            <div className="bg-green-50 rounded-xl p-5 h-64">
                                <ResponsiveContainer width="100%" height="100%">
                                    <BarChart data={marketData}>
                                        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                        <XAxis dataKey="year" stroke="#64748b" />
                                        <YAxis stroke="#64748b" />
                                        <Tooltip
                                            formatter={value => [`${value} 亿美元`, "市场规模"]}
                                            contentStyle={{
                                                backgroundColor: "white",
                                                border: "none",
                                                borderRadius: "10px",
                                                boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                            }} />
                                        <Bar dataKey="value" fill="#10B981" radius={[4, 4, 0, 0]}>
                                            {marketData.map((entry, index) => (
                                                <Cell
                                                    key={`cell-${index}`}
                                                    fill={index === marketData.length - 1 ? "#059669" : "#10B981"} />
                                            ))}
                                        </Bar>
                                    </BarChart>
                                </ResponsiveContainer>
                            </div>
                        </div>
                        
                        {/* AI解析效率提升 */}
                        <div>
                            <h4 className="font-semibold text-xl text-gray-800 mb-4">AI解析效率提升</h4>
                            <div className="space-y-5">
                                <div>
                                    <div className="flex justify-between mb-1">
                                        <span className="text-sm font-medium text-gray-700">处理速度</span>
                                        <span className="text-sm font-medium text-green-600">提升10倍</span>
                                    </div>
                                    <div className="w-full h-6 bg-gray-200 rounded-full overflow-hidden">
                                        <div
                                            className="h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full"
                                            style={{
                                                width: "90%"
                                            }}></div>
                                    </div>
                                </div>
                                <div>
                                    <div className="flex justify-between mb-1">
                                        <span className="text-sm font-medium text-gray-700">准确率</span>
                                        <span className="text-sm font-medium text-green-600">98%</span>
                                    </div>
                                    <div className="w-full h-6 bg-gray-200 rounded-full overflow-hidden">
                                        <div
                                            className="h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full"
                                            style={{
                                                width: "98%"
                                            }}></div>
                                    </div>
                                </div>
                                <div>
                                    <div className="flex justify-between mb-1">
                                        <span className="text-sm font-medium text-gray-700">时间节省</span>
                                        <span className="text-sm font-medium text-green-600">缩短75%</span>
                                    </div>
                                    <div className="w-full h-6 bg-gray-200 rounded-full overflow-hidden">
                                        <div
                                            className="h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full"
                                            style={{
                                                width: "75%"
                                            }}></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}